<template>
  <div class="form-demo">
    <title-bar title="form" />
    <van-form
      :colon="true"
      @submit="onSubmit"
      :readonly="!isAdd"
      :disabled="!isAdd"
    >
      <div class="box1">
        <van-field
          v-model="addForm.mobile"
          type="tel"
          label="手机号"
          :required="true"
          placeholder="请输入手机号"
          :rules="[
            {
              required: true,
              message: '',
            },
          ]"
        />
        <van-field
          v-model="addForm.message"
          rows="2"
          autosize
          label="留言"
          :required="true"
          type="textarea"
          maxlength="50"
          placeholder="请输入留言"
          show-word-limit
          :rules="[
            {
              required: true,
              message: '',
            },
          ]"
        />
        <van-field :required="true" label="位置">
          <template #input>
            <van-radio-group
              v-model="addForm.position"
              direction="horizontal"
              :disabled="!isAdd"
              :rules="[
                {
                  required: true,
                  message: '请选择',
                },
              ]"
            >
              <van-radio name="1">上单</van-radio>
              <van-radio name="2">打野</van-radio>
            </van-radio-group>
          </template>
        </van-field>
        <van-field label="是否新增">
          <template #input>
            <van-switch v-model="isAdd" @change="switchChange" />
          </template>
        </van-field>
      </div>

      <div style="margin: 16px" v-if="isAdd">
        <van-button round block type="info" native-type="submit">
          提交
        </van-button>
      </div>
    </van-form>
  </div>
</template>
<script>
import TitleBar from "@/components/title-bar";
import { Form, Field, Button, Switch, RadioGroup, Radio } from "vant";
export default {
  data() {
    return {
      isAdd: false,
      addForm: {
        mobile: "",
        message: "",
        position: "",
      },
    };
  },
  components: {
    TitleBar,
    [Form.name]: Form,
    [Field.name]: Field,
    [Button.name]: Button,
    [Switch.name]: Switch,
    [RadioGroup.name]: RadioGroup,
    [Radio.name]: Radio,
  },
  mounted() {
    this.addForm = {
      mobile: "",
      message: "测试内容",
      position: "1",
    };
  },
  methods: {
    onSubmit() {},
    switchChange(value) {
      if (value) {
        this.addForm.position = "";
      }
    },
  },
};
</script>
<style lang="less" scoped>
.form-demo {
  width: 100vw;
  height: 100vh;
  background-color: #f6f9ff;
}

.box1 {
  margin: 16px;
  border-radius: 6px;
}
/deep/.van-field--disabled .van-field__label {
  color: blue;
}
</style>